<template>
  <div class="about">
    <div class="banner">
       <!-- <swiper :config="{id:'banner',info:{pagination: '.swiper-pagination',}}" >
            <div class="swiper-slide" v-for="(item,index) in list" :key="index">
              <img  class="banner_img" :src="bannners+item+'.jpg'" >
            </div>
        </swiper> -->
    <van-swipe class="swiper">
      <van-swipe-item v-for="(image, index) in list" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    </div>
    <div class="more" @click="toPath">
      更多商品
    </div>
    <div class="main">
      <h1></h1>
      <div class="new-cut">
        <div class="new">新</div>
        <div class="cut">折</div>
      </div>
      <div class="black">
      </div>
      <!-- 商品信息 -->
      <div class="content">
         <div class="sweet" >
           <span>甜度</span>
           <img src='https://res.bestcake.com/m-images/ww/jz/tiandu_3.png' alt="">
         </div>
         <div class="test">
           <span>口味</span>
           <i>乳品</i>
         </div>
         <div class="test">
           <span>原材料</span>
           <i>见详情页</i>
         </div>
          <div class="test" >
           <span>适合人群</span>
           <!-- <i>{{JSON.parse(this.types[0].Details).details_tips}}</i> -->
           <i>所有人群</i>
         </div>
          <div class="test">
           <span>保鲜条件</span>
           <i>最适宜0℃~8℃冷藏保存，离开冷藏请勿超过2小时。5月1日~10月31日建议2天内食用 11月1日~翌年4月30日建议3天内食用。</i>
         </div>
      </div>
      <!-- 商品评价 -->
      <div class="views">
        <div class="left"> <span class="fa fa-envelope-open-o fa-lg"></span>商品评价</div>
        <div is-link @click="showPopup" class="right">(0)条 ></div>
        <!-- <van-cell is-link @click="showPopup" class="right">(0)条  ></van-cell> -->
        <van-popup v-model="show" class="show">暂无评价哦！</van-popup>
      </div>
      <!-- 商品规格选项 -->
      <div class="detail" >
         <div class="info" v-for="(item,index) in types" :key="index" >
            <div class="title">
              <div @click="userSelct(index)" class="buttem">{{item.Size}}</div>
            </div>
          </div>
      </div>
      <!-- 商品规格详情 -->
      <div class="main-product">
        <div class="list">
            <span class="fa fa-clone fa-lg"></span>
            13.5*13.5cm
        </div>
        <div class="list">
            <span class="fa fa-arrow-circle-o-right fa-lg"></span>
            适合4-5人分享
        </div>
        <div class="list">
            <span class="fa fa-cutlery fa-lg"></span>
            含5人份餐具
        </div>
        <div class="list">
            <span class="fa fa-user-o fa-lg"></span>
            至少需要提前一天预定
        </div>
      </div>
      <div class="num">
        <div class="left">
          购买数量
        </div>
        <div class="right">
          <div class="add" @click="cut()">-</div>
            <span>{{num}}</span>
           <div class="add" @click="add()">+</div>
        </div>
      </div>
    </div>
    <div class="buttom">
        <div class="bottom-top">
          <div class="bottom-left">
            划线价格
          </div>
           <div class="bottom-right">
               商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。
          </div>
        </div>
         <div class="bottom-bottom">
            <div class="bottom-left">
              未划线价格
            </div>
            <div class="bottom-right">
                商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准
            </div>
        </div>
      </div>
    <!-- 加购 -->
    <div class="add-cart">
         <van-goods-action>
            <div class="money-now">300</div>
            <div class="money-cut">已优惠:200</div>
            <van-goods-action-button color="rgb(104, 218, 224)" type="warning" text="加入购物车" @click="addcart()"/>
            <van-goods-action-button color="rgb(56, 208, 216)" type="danger" text="立即购买" @click="gonow()"/>
          </van-goods-action>
    </div>
  </div>
</template>
<script>
import indexjs from './index.js'
export default indexjs
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
 .about{
  overflow-y:scroll;
 }
  .swiper-container{
    height: 440px;
    width: 100%;
  }
  .banner img{
    width:100%;
    // height:100%;
  }
// 更多商品
  .more{
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    color: #34B8BF;
    border:1px solid rgb(104, 218, 224);
    font-weight: 600;
    position:fixed;
    right:0;
    top: 30px;
    z-index: 100;
  }

// 商品信息
  .main h1{
    text-align: center;
    font-size: 16px;
  }
// 折
  .main{
   .new-cut{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 20px 0;
    .new,.cut{
      display: inline-block;
      width: 10%;
      height: 30px;
      line-height: 30px;
      background-color: rgb(250, 65, 65);
      color: white;
      font-size: 16px;
      border-radius: 3px;
    }
    .new{
      margin-right: 10px;
    }
  }
  .black{
    height: 10px;
    background-color: aliceblue;
  }

  // 甜度
   .content .sweet,.test{
     margin-top: 20px;
     vertical-align: top;
   }
   .content span{
     font-size: 14px;
     display: inline-block;
     color: gray;
     width: 30%;
     line-height: 20px;
     vertical-align: top;
    //  margin-top: -r(10);
   }
   .content i{
     display: inline-block;
     width: 70%;
     line-height: 20px;
     color: black;
     font-size: 14px;
   }
   .content .sweet img{
     width: 30%;
     height: 20px;
   }
 }

//  商品规格
.detail{
    margin: 20px 0;
.info{
  margin: 5px 0;
  display: inline-block;
}
.title{
  display: inline-block;
}
.buttem{
  width: 100px;
  margin-right: 15px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid rgb(185, 184, 184);
  font-size: 14px;
  display: inline-block;
}
}
// 商品规格详情
.main-product{
  padding: 20px 0 30px 10px;
  border-bottom: 10px solid aliceblue;
  margin-bottom: 20px;
 .list{
  display: inline-block;
  width: 50%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
 }
}

 // 最下方
.buttom{
  margin: 20px 0 60px;
  color: rgb(77, 75, 75);
  line-height: 20px;
  background-color: rgb(244, 247, 250);
  padding: 20px 10px 0;
}
.buttom .bottom-left{
  display: inline-block;
  width: 30%;
  font-size: 14px;
  font-weight: 600;
  vertical-align: top;
}
.buttom .bottom-right{
  padding-bottom: 10px;
  display: inline-block;
  width: 70%;
}

.bottom-bottom{
  margin: 20px 0 60px;
}

// 加购
.num {
  height: 20px;
  line-height: 20px;
  .left{
    float: left;
    font-size: 14px;
  }
  .right{
    float: right;
    .add,.cut,span{
      display: inline-block;
      width: 20px;
      text-align: center;
      font-size: 14px;
    }
  }
}

// money-now

.money-now{
 font-size: 20px;
 color: red;
 margin:0 10px ;
}
.money-cut{
  font-size: 10px;
  vertical-align: bottom;
}
// 商品评价
.views {
overflow: hidden;
padding:20px 10px;
font-size: 14px;
border-top: 10px solid aliceblue;
border-bottom: 10px solid aliceblue;
margin-top: 20px;
.left{
  float: left;
   span{
     margin-right: 10px;
   }
 }
 .right{
   float: right;
 }
 .show{
   text-align: center;
   line-height: 50px;
   width: 100px;
   height: 50px;
   font-size: 14px;
 }
}
</style>
